<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Exercise 1</title>
    <meta
      content="width=device-width, initial-scale=1, maximum-scale=1"
      name="viewport"
    />
    <link rel="stylesheet" href="css/nested.css">
  </head>

  <body>
  <div class = "container">
    <div class="header box">Header</div>
    <div class="sidebar box"><h1>Blog Posts</h1><a href="blog-post.html">Most Recent Post</a></div>
    <div class="content box">
<!-- nest grid here -->
        <div id="nestedBox">
            <div class="photoBox" id="one"></div>
            <div class="photoBox" id="two"></div>
            <div class="photoBox" id="three"></div>
            <div class="photoBox" id="four"></div>
        </div>
    </div>
    <div class="footer box">Footer</div>
  </div>
  </body>
</html>